<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子内容区Content</title>
<!--
content:元素中的文本或后代元素都是他的内容
我们可以通过css调整content的这些属性
    max-content:内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求。
    min-content:装下单个最大内容的最小宽度
    fit-content:在不超过父级盒子宽度的情况下，尽量撑开盒子满足自己的需求。
    width:设置内容区域宽度
    max-width:设置内容区域的最大宽度,允许元素在不超过指定最大宽度的情况下自适应调整其宽度
    min-width:设置内容区域的最小宽度
    height:设置内容区域的高度
    max-height:设置内容区域的高度,允许元素在不超过指定最大高度的情况下自适应调整其宽度,如果文字过多,会超出盒子显示,后续会有方法进行处理
    min-height:设置内容区域的最小高度

-->
    <style>
        div{
            font-size: 100px;
            border: 2px red solid;
            /*max-width: 500px;*/
            max-height: 400px;
        }
    </style>
</head>
<body>
<div>
    你看看我设置了max-height和max-width之后的效果怎么样
</div>
你怕啥
</body>
</html>